import React from 'react'
import { Layout,Image} from 'antd';
import Table from '../Table'
import Editor from "../Editor"
import "./tr.css"
import {useSelector,useDispatch,connect} from 'react-redux'
const {Content} = Layout;


const Food = () => {

  const foodList = useSelector(state=> state.food.foodList)
  const valueList = useSelector(state=> state.value.valueList)
  const dispatch = useDispatch()


  const columns = [
    {
      title: '餐厅名称',
      key: 'foodName',
      dataIndex: 'foodName',
      valueType: 'text'
    },
    {
      title: '美食图片',
      key: 'foodImg',
      dataIndex: 'foodImg',
      ellipsis:true,
      hideInSearch:true,
      render:(text,record)=>{
          if((record.foodImg).search(';') == -1){
            return(
              <Image.PreviewGroup>
                <Image width={30} height ={30} src={record.foodImg} />
              </Image.PreviewGroup>
            )

          }else{
            return (
              <Image.PreviewGroup>
                {
                  (record.foodImg).split(";").map((items, index) =>{
                    return <Image width={30} height ={30} src={items} />

                  }
                  )
                }
              </Image.PreviewGroup>
              
            )
          }
        }
    },
    {
      title: '营业时间',
      key: 'foodTime',
      dataIndex: 'foodTime',
      valueType: 'text',
      ellipsis:true
    },
    {
      title: '美食地点',
      key: 'foodAddr',
      dataIndex: 'foodAddr',
      valueType: 'text',
      ellipsis:true
    },
    {
      title: '美食类型',
      key: 'foodType',
      dataIndex: 'foodType',
      valueType: 'text',
      ellipsis:true
    },
    {
      title: '推荐菜',
      key: 'foodRecom',
      dataIndex: 'foodRecom',
      valueType: 'text',
      ellipsis:true
    },
    {
      title: '用户评论',
      key: 'ufoodTalk',
      dataIndex: 'ufoodTalk',
      valueType: 'text',
      ellipsis:true
    },
    {
      title: '美食介绍',
      key: 'foodTalk',
      dataIndex: 'foodTalk',
      valueType: 'text',
      ellipsis:true
    },

    {
        title: '操作',
        key: 'option',
        width: 120,
        valueType: 'option',
        render: (text,record,index,action) => [<div onClick={()=>{
          dispatch({type:'get',con:record});
        }}><Editor ques={food} url="http://49.233.107.127:2002/city/food"/></div>
        , <a onClick={async ()=>{
          await fetch(`http://49.233.107.127:2002/city/food/${record.foodID}/${record.cityID}`,{
          method:'delete',
          headers: {
            'Content-Type': 'application/json;charset=UTF-8'
          }
        })
        dispatch({type:'delete',content:['delete']})
        }}>删除</a>]
      }];
  
    const right = {
      foodTalk:{
        show:false,
        order:2
      },
      foodImg:{
        show:false,
        order:2
      },
      foodRecom:{
        show:false,
        order:2
      },
      ufoodTalk:{
        show:false,
        order:2
      }
    }
  
  
    const food = [
      {name:'cityID',label:'城市id',tooltip:'最长为24位',placeholder:'输入城市id'},
      {name:'foodID',label:'餐厅id',tooltip:'最长为24位',placeholder:'请输入餐厅id'},
      {name:'foodName',label:'餐厅名称',tooltip:'最长为24位',placeholder:'输入餐厅名称'},
      {name:'foodImg',label:'美食图片',placeholder:'上传图片'},
      {name:'foodTime',label:'营业时间',tooltip:'最长为24位',placeholder:'输入营业时间'},
      {name:'foodTalk',label:'美食介绍',placeholder:'输入美食类型'},
      {name:'ufoodTalk',label:'用户评论',placeholder:'输入用户评论'},
      {name:'foodAddr',label:'美食地点',placeholder:'请输入美食地点'},
      {name:'foodType',label:'美食类型',placeholder:'请输入美食类型'},
      {name:'foodRecom',label:'美食推荐',placeholder:'请输入美食推荐'}
  ]
    return (
        <Content className="site-layout-background" style={{paddingLeft: 10,margin: 0,minHeight: 280,}}>
          <Table title="美食推荐管理" columns={columns} right={right} url="http://49.233.107.127:2002/city/food" ques={food}/>
        </Content>
    )
}

export default connect()(Food)
